<template>
    <div class="body" @click="closePop" v-show="isShowPop">
        <div class="sign-content">
            <div class="date">
                <div class="calendar">
                    <van-calendar :lazy-render="false" row-height="48" color="#075ebb" :min-date="minDate" :max-date="maxDate" type="multiple" :default-date="signInDates" :title="$t('sign_in_success') + signDays + $t('sign_in_success_day')" :show-subtitle="false" :readonly="true" :poppable="false" :show-confirm="false" :style="{ height: '340px' }"></van-calendar>
                </div>
<!--                <div class="sign-status">-->
<!--                    签到成功，已连续签到 8 天-->
<!--                </div>-->
            </div>
            <div class="note">
                <div v-for="(item,index) in integralRules" :key="index" style="overflow-y:auto">
                    <div v-if="item.integralRuleType === 'DAY_SIGN'" style="margin-top: 5px;">{{$t('sign_in_tip_day') + item.integralRuleIntegralNum +  $t('sign_in_tip_point')}}</div>
                    <div v-else style="margin-top: 5px;"> {{$t('sign_in_tip_days') +  item.integralRuleDayNum  + $t('sign_in_tip_days_last') + item.integralRuleIntegralNum + $t('sign_in_tip_point')}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Calendar from 'vant/lib/calendar';
export default {
    name: 'SignInDate',
    components: {
        vanCalendar: Calendar
    },
    data() {
        return {
            integralRules: [], //签到规则集合
            minDate: new Date(new Date().getFullYear() + '-' + '01' + '-' + '01'), //日历最小显示日期(当年第一天)
            maxDate: new Date(), //日历最大显示日期
            signInDates: [], //已签到日期集合
            signDays: 0, //连续签到天数
            isLoading: false
        };
    },
    created() {
        this.findIntegralRuleList();
    },
    watch: {
        isShowPop() {
            //解决日历显示区域不是最近签到日期以及多次调用获取签到日期列表的性能问题
            if (this.isShowPop) {
                if (this.signInDates && this.signInDates.length > 0) {
                    this.signInDates = [].concat(this.signInDates);
                } else {
                    this.findUserSignInDaysByEntId(true);
                }
            }
        }
    },
    props: {
        isShowPop: {
            type: Boolean,
            default: false
        },
        isShowSuccessTitle: {
            type: Boolean,
            default: false
        },
        userEntId: {
            type: String,
            default: null
        }
    },
    methods: {
        /**
         * 获取用户签到日期列表及连续签到天数
         * @param hasSignDays
         */
        findUserSignInDaysByEntId(hasSignDays) {
            if (this.userEntId) {
                this.isLoading = true;
                this.$axios.get(`/app/sign-in/sign-list/${this.userEntId}`, {params: {hasSignDays: hasSignDays}}).then((res) => {
                    const dates = res.data.signList;
                    dates.forEach((item) => {
                        this.signInDates.push(new Date(item));
                    });
                    this.signDays = res.data.signDays || 0;
                    //
                    this.isLoading = false;
                });
            }
        },
        /**
         * 获取签到规则
         */
        findIntegralRuleList() {
            if (this.userEntId) {
                this.$axios.get('/app/integral-rule/list').then((res) => {
                    if (res.data && res.data.length > 0) {
                        this.integralRules = res.data;
                    } else {
                        this.integralRules = [];
                    }
                });
            }
        },
        closePop() {
            // this.$emit('update:isShowPop', false);
            this.$emit('on-close');
        }
    }
};
</script>

<style scoped lang="less">
    .body {
        /deep/.van-calendar__header {
            box-shadow:none;
        }
        /deep/.van-calendar__header-subtitle {
            height: 40px;
            line-height: 40px;
        }
        /deep/.van-calendar__month-mark {
            font-size: 100px;
        }
        position: fixed;
        height: calc(100vh - 55px);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: rgba(0,0,0,0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        .sign-content {
            width: 80%;
            max-height: 80%;
            background: #fff;
            border-radius: 10px;
            padding: 0 0 10px 0;
            box-shadow:0 0 10px rgba(0,0,0,0.3);
            .date {
                padding:0 10px 10px 10px;
                .calendar {
                    color: #000;
                }
                .sign-status {
                    font-size: 15px;
                    margin-top: 10px;
                }
            }
            .note {
                padding: 5px 10px 10px 10px;
                border-top: 1px solid #ccc;
                height: 45px;
                overflow-y: auto;
            }
        }
    }
</style>
